<style lang="scss" scoped>
.title-container {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.main-container {
  overflow: hidden;
  margin-bottom: 30px;
}
.dots {
  width: auto;
  margin-right: 20px;
  .dot {
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    background-color: grey;
    border-radius: 3px;
    cursor: pointer;
  }
  .dot-active {
    background-color: $link-color;
  }
}
.card-list-container {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  transition: all ease-out 0.5s;
  transform: translateX(0);
}

.card-container {
  flex-shrink: 0;
  padding: 10px;
  width: 25%;
}
.card-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Open Sans';
}
.card-desc {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  font-family: 'PingFang SC';
}
.card-body-container {
  padding: 10px;
}
.card-user-container {
  display: flex;
  justify-content: space-between;
  color: #333333ff;
  line-height: 30px;
  font-size: 12px;
  font-weight: 400;
  font-family: 'Open Sans';
}
.view-like-btn {
  line-height: 16px;
}
</style>

<template>
  <!-- 列表1 -->
  <div class="main-container">
    <!-- 标题栏 -->
    <el-row :gutter="0" class="title-container">
      <!-- 标题 -->
      <el-col :span="12">
        <h1>{{ props.title }}</h1>
      </el-col>
      <!-- 分页器 -->
      <el-col :span="12" class="title-container">
        <div class="dots">
          <span
            class="dot"
            v-for="item in Math.ceil(img_list.length / 4)"
            :key="item"
            @click="switch_dots($event)"
            :id="item"
            :ref="get_my_dot"
          ></span>
        </div>
        <el-link type="primary" class="link">更多></el-link>
      </el-col>
    </el-row>

    <!-- 卡片列表 -->
    <div class="card-list-container" ref="card_list">
      <!-- 卡片列表的卡片,根据图片数量自动生成 -->
      <div class="card-container" v-for="item in img_list" :key="item.id">
        <el-card :body-style="{ padding: '0px', boxShadow: 'none' }">
          <div class="card-img">
            <el-image :src="item.url" fit="fill"></el-image>
          </div>
          <div class="card-body-container">
            <h2 class="card-title">向阳启航</h2>
            <div class="card-desc">
              <span>设备:<el-link target="_blank">Marvic 2 pro</el-link></span>
            </div>
            <div class="view-like-btn">
              <span
                ><el-icon><View /></el-icon>
                2165
              </span>

              <span
                ><el-icon><Star /></el-icon>
                48
              </span>
            </div>

            <el-divider />

            <div class="card-user-container">
              <div class="card-user-container">
                <el-avatar shape="circle" :size="30" />
                <p>Mike Tesselaar</p>
              </div>

              <div>
                <p>2022年12月01日</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import request from '../../../../utils/axios';

// 接受父组件传来的请求id
const props = defineProps(['id', 'title']);

// 通过ref获取循环的指示器
let my_dot = ref([]);
function get_my_dot(ele) {
  if (ele) {
    my_dot.value.push(ele);
  }
}

// 操作卡片列表,切换页数
let card_list = ref();

const switch_dots = (ele) => {
  my_dot.value.forEach((item) => {
    item.classList.remove('dot-active');
  });
  ele.target.classList.add('dot-active');

  let index = ele.target.id;
  switch (index) {
    case '1':
      card_list.value.style.transform = 'translateX(0)';
      break;
    case '2':
      card_list.value.style.transform = 'translateX(-100%)';
      break;
    case '3':
      card_list.value.style.transform = 'translateX(-200%)';
      break;
    case '4':
      card_list.value.style.transform = 'translateX(-300%)';
      break;
  }
};

// axios请求图片地址
let img_list = ref([]);
onMounted(async (id) => {
  //解构
  await request({
    // 请求地址
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    // 请求方式
    method: 'GET',
    //get的参数
    params: {
      carouselGroupId: props.id,
    },
  }).then((res) => {
    img_list.value = res.data.Carousels;
  });
  // 第一步将所有的指示器圆点的第一个设置为active
  const frist_dot = my_dot.value[0];
  frist_dot.classList.add('dot-active');
});
</script>
